import { StyleSheet, 
  ImageBackground, 
  Text, 
  FlatList,
  ToastAndroid,
  BackHandler,
  View, 
  Image,
  Button,
  Modal,
  TextInput,
  ScrollView,
  Dimensions,
  TouchableOpacity,
  PixelRatio,
  Platform,
  Share,
  Animated
} from 'react-native';
import { AntDesign } from '@expo/vector-icons'; 
import React, { useState,useEffect,useRef } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator  } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator ();

const Home = ({navigation})=>{
  const [num,setNum] = useState(0);
  useEffect(()=>{
    console.log(123);
  },[])
  return <View>
      <Text>首页</Text>
      <Text style={{fontSize: 50}}>{num}</Text>
      <Button 
        title='数字加1'
        onPress={()=>{setNum(num+1)}}
      />
      <Button 
        title='详情页'
        onPress={()=>{navigation.navigate('Detail',{id:num})}}
      />
  </View>
}

const Detail = ({route,navigation})=>{
  
  useEffect(()=>{
    navigation.setOptions({
      title:route.params.id,
      headerBackVisible: false,
      headerRight: ()=>{
        return <AntDesign name="setting" size={24} color="black" />
      },
      headerLeft: ()=>{
        return <Image 
          source={require('./assets/favicon.png')}
        />
      },
      headerTitle: ()=>{
        return <Button 
          title='center'
        />
      },

    })
  },[])
  return <Text>详情页{route.params.id}</Text>
}

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator
        screenOptions={
          {
            headerStyle:{
              backgroundColor: '#ccc'
            },
            headerTitleAlign: 'center',
            headerTintColor: 'red',
          }
      }>
        <Stack.Screen 
          name='Home' component={Home} 
          options={
            {
              title: '首页',
            }
          }
        />
        <Stack.Screen 
          name='Detail' component={Detail} 
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}
